<template>
  <div>
    <van-tabs
      title-inactive-color="rgba(255,255,255,.65)"
      title-active-color="#9812a4"
      v-model:active="active"
      scrollspy
      sticky
      background="url(https://img.alicdn.com/imgextra/i4/2053469401/O1CN011TM4Zn2JJi1K2DdqC_!!2053469401.png) 0% 0% / 100% no-repeat"
    >
      <van-tab
        v-for="item in halfNav"
        :key="item.id"
        :title="item.title"
        :name="item.id"
      >
        <div class="half-container">
          <div :class="'active-time ' + 'active-time' + item.id">
            距离活动开始还有
            <i class="day">4天</i>
            <span>04</span>
            :
            <span>16:</span>
            :
            <span>20</span>
          </div>
          <div :class="'half-floor-title ' + 'half-floor-title' + item.id">
            <h4>{{ item.title }}</h4>
            <div class="half-floor-subtitle">{{ item.title_two }}</div>
          </div>
          <div class="half-floor-swiper">
            <div class="half-floor-swiper-wrapper">
              <div
                class="half-floor-swiper-wrapper-part"
                v-for="v in item.horizontal"
                :key="v.id"
              >
                <div class="half-floor-swiper-wrapper-part-img">
                  <img :src="v.pic_url" alt="" />
                  <span class="self_label">{{ v.self_selling_point }}</span>
                </div>
                <div class="half-floor-swiper-wrapper-part-title">
                  {{ v.name }}
                </div>
                <div class="half-floor-swiper-wrapper-part-price">
                  ￥
                  <span class="xianjia">{{ v.sale_price }}</span>
                  <span class="yuanjia">{{ v.price }}</span>
                </div>
                <div class="half-floor-swiper-wrapper-part-baokuan">
                  <span class="baokuan-msg">爆卖</span>
                  <span class="baokuan-num">{{ v.xiaoliang }}</span>
                  <span>件</span>
                </div>
                <div class="half-floor-swiper-wrapper-part-peonum">
                  <span>{{ v.want_to_buy_num }}</span>
                  人想买
                </div>
              </div>
            </div>
          </div>
          <div class="half-floor-goods">
            <div
              class="half-floor-goods-item"
              v-for="y in item.vertical"
              :key="y.id"
            >
              <img :src="y.pic_url" alt="" />
              <div class="half-floor-goods-info">
                <div class="half-floor-goods-info-title">{{ y.name }}</div>
                <div class="half-floor-goods-info-price">
                  <span class="half-floor-goods-info-ju">聚</span>
                  <span class="half-floor-goods-info-yuan">￥</span>
                  <span class="half-floor-goods-info-xianjia">{{
                    y.sale_price
                  }}</span>
                  <span class="half-floor-goods-info-yuanjia"
                    >￥ {{ y.price }}</span
                  >
                  <span class="half-floor-goods-info-xianshi">
                    限时价
                    <span class="triangle"></span>
                  </span>
                </div>
                <div class="half-floor-goods-info-msg">
                  <span>{{ y.self_selling_point }}</span>
                </div>
                <div class="half-floor-goods-info-buy">
                  <div>
                    <span class="peo-num">{{ y.want_to_buy_num }}</span>
                    人想买
                  </div>
                  <div class="btn-car">加入购物车</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="stylus" scoped>
/deep/.van-sticky--fixed {
  top: 0.45rem !important;
}

/deep/.van-tabs__line {
  background: #9812a4;
}

.half-container {
  .active-time {
    display: none;
  }

  .active-time1 {
    margin-bottom: 0.15rem;
    font-size: 0.12rem;
    font-weight: 400;
    color: #fff;
    line-height: 0.17rem;
    margin-top: 0.14rem;
    text-align: center;
    display: flex;
    justify-content: center;
    margin: 0.15rem 0;

    .day {
      margin: 0 0.02rem;
      font-style: normal;
    }

    span {
      display: inline-block;
      width: 0.18rem;
      height: 0.18rem;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 0.02rem;
      line-height: 0.18rem;
      margin: 0 0.04rem;
    }

    &::before {
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #fff 100%);
      transform: translate(-0.06rem, 0.06rem);
      width: 0.5rem;
      height: 0.01rem;
      border-radius: 0.02rem;
      opacity: 0.7;
      content: '';
      display: inline-block;
    }

    &::after {
      background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, 0) 100%);
      transform: translate(0.02rem, 0.06rem);
      width: 0.5rem;
      height: 0.01rem;
      border-radius: 0.02rem;
      opacity: 0.7;
      content: '';
      display: inline-block;
    }
  }

  .half-floor-title1 {
    color: #fff;
  }

  .half-floor-title {
    color: #3a3836;
    margin-top: 0.2rem;

    h4 {
      text-align: center;
      font-size: 0.15rem;
      font-weight: 500;
      margin: 0;
      padding: 0;
    }

    .half-floor-subtitle {
      font-size: 0.1rem;
      font-weight: 400;
      text-align: center;
      line-height: 0.2rem;
    }
  }

  .half-floor-swiper {
    margin: 0.11rem 0rem 0.1rem 0.11rem;
    overflow-x: scroll;

    .half-floor-swiper-wrapper {
      display: flex;
      font-size: 0.14rem;

      .half-floor-swiper-wrapper-part {
        width: 1.1rem;
        background: #fff;
        border-radius: 0.08rem;
        margin-right: 0.05rem;
        padding: 0 0.05rem 0.05rem;
        box-sizing: border-box;

        .half-floor-swiper-wrapper-part-img {
          position: relative;
          z-index: 1;
          zoom: 1;

          img {
            width: 1rem;
            height: 1rem;
            background: pink;
            border-radius: 0.05rem;
            margin: 0.05rem 0 0.06rem;
            display: block;
          }

          .self_label {
            position: absolute;
            z-index: 1;
            zoom: 1;
            left: 0;
            bottom: 0;
            height: 0.14rem;
            background: linear-gradient(270deg, #ffb400 0, #ff851c 100%);
            padding: 0 0.08rem;
            font-size: 0.1rem;
            font-weight: 400;
            color: #fff;
            text-overflow: ellipsis;
            max-width: 100%;
            box-sizing: border-box;
            border-radius: 0 0.06rem 0 0;
          }
        }

        .half-floor-swiper-wrapper-part-title {
          height: 0.14rem;
          font-size: 0.1rem;
          font-weight: 400;
          color: #333;
          line-height: 0.14rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .half-floor-swiper-wrapper-part-price {
          font-size: 0.11rem;
          font-weight: 400;
          color: #FF0637;
          line-height: 0.17rem;
          margin: 0.03rem 0;
          color: #2AA451;

          .xianjia {
            font-size: 0.16rem;
            font-weight: 500;
            margin: 0 0.01rem;
          }

          .yuanjia {
            font-size: 0.1rem;
            color: #a7a7a7;
            text-decoration: line-through;
          }
        }

        .half-floor-swiper-wrapper-part-baokuan {
          background: #FE3E53;
          background-size: 0.9rem 0.25rem;
          width: 0.9rem;
          height: 0.2rem;
          transform: translateX(-0.05rem);
          padding-left: 0.05rem;
          font-size: 0.1rem;
          font-weight: 400;
          line-height: 0.2rem;
          color: #fff;
          box-sizing: border-box;
          border-radius: 0 0.05rem 0.05rem 0;

          span {
            height: 0.25rem;
            display: inline-block;
          }

          .baokuan-msg {
            color: #CE4F08;
            margin-right: 0.13rem;
          }
        }

        .half-floor-swiper-wrapper-part-peonum {
          font-size: 0.1rem;
          color: #666;
          margin-top: 0.02rem;

          span {
            display: inline-block;
            font-size: 0.12rem;
            color: #FF0637;
            margin-right: 0.02rem;
          }
        }
      }
    }
  }

  .half-floor-goods {
    .half-floor-goods-item {
      display: flex;
      margin: 0.1rem 0.1rem 0;
      padding: 0.07rem;
      height: 1.24rem;
      background: #fff;
      box-sizing: border-box;
      border-radius: 0.08rem;
      position: relative;
      z-index: 1;
      zoom: 1;
      font-size: 0.14rem;
      text-align: left;

      img {
        background: rgb(245, 245, 245);
        display: block;
        width: 1.1rem;
        height: 1.1rem;
        margin-right: 0.12rem;
        border-radius: 0.05rem;
      }

      .half-floor-goods-info {
        flex: 1;
      }

      .half-floor-goods-info-title {
        height: 0.18rem;
        font-size: 0.13rem;
        font-weight: 400;
        color: #333;
        line-height: 0.18rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .half-floor-goods-info-price {
        .half-floor-goods-info-ju {
          width: 0.14rem;
          height: 0.14rem;
          background: #ed080a;
          border-radius: 0.03rem;
          line-height: 0.14rem;
          color: #fff;
          font-size: 0.1rem;
          display: inline-block;
          float: left;
          margin-top: 0.02rem;
          margin-right: 0.05rem;
          text-align: center;
        }

        .half-floor-goods-info-yuan {
          font-size: 0.12rem;
          color: #2AA451;
          line-height: 0.17rem;
        }

        .half-floor-goods-info-xianjia {
          font-size: 0.18rem;
          margin: 0 0.02rem;
          color: #2AA451;
        }

        .half-floor-goods-info-yuanjia {
          font-size: 0.1rem;
          color: #A7A7A7;
          text-decoration: line-through;
          margin: 0 0.02rem;
        }

        .half-floor-goods-info-xianshi {
          position: relative;
          z-index: 1;
          zoom: 1;
          font-size: 0.09rem;
          color: #fff;
          background: linear-gradient(150deg, #fe3a33 0, #fb8d2c 100%);
          padding: 0 0.03rem;
          margin-left: 0.05rem;
          top: -0.02rem;
          height: 0.12rem;

          .triangle {
            position: absolute;
            zoom: 1;
            left: -0.04rem;
            top: 0;
            width: 0;
            height: 0;
            z-index: -1;
            border-color: #f8403a transparent transparent;
            border-width: 0.06rem 0.08rem;
            border-style: solid;
            transform: rotate(-1deg);
          }
        }
      }

      .half-floor-goods-info-msg {
        margin: 0.07rem 0;

        span {
          display: inline-block;
          height: 0.15rem;
          background: #ffeecd;
          border-radius: 0.02rem;
          font-size: 0.1rem;
          color: #E2631C;
          line-height: 0.15rem;
          padding: 0 0.04rem;
        }
      }

      .half-floor-goods-info-buy {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-top: 0.2rem;

        div {
          color: #666;
          font-size: 0.12rem;

          .peo-num {
            color: #FF0637;
            margin-rigth: 0.02rem;
          }
        }

        .btn-car {
          width: 0.83rem;
          height: 0.3rem;
          font-size: 0.12rem;
          color: #fff;
          line-height: 0.26rem;
          background: #37C165;
          text-align: center;
          line-height: 0.3rem;
          border-radius: 0.08rem;
        }
      }
    }
  }
}
</style>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const active = ref(2);
    const halfNav = computed(() => {
      return store.state.half.halfNav;
    });
    const getHalfList = () => {
      return store.dispatch({
        type: "half/getHalfList",
      });
    };
    onMounted(() => {
      getHalfList();
    });

    return {
      halfNav,
      getHalfList,
      active,
    };
  },
});
</script>
